<template>
  <div class="admin-layout">
    <!-- 侧边栏导航 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>管理后台</h2>
      </div>
      <nav class="sidebar-nav">
        <router-link 
          to="/admin" 
          :class="{'active': $route.name === 'AdminHome'}"
        >
          首页
        </router-link>
        <router-link 
          to="/admin/dashboard" 
          :class="{'active': $route.name === 'Dashboard'}"
        >
          数据面板
        </router-link>
        <router-link 
          v-if="authStore.isAdmin"
          to="/admin/users" 
          :class="{'active': $route.name === 'UserManagement'}"
        >
          用户管理
        </router-link>
        <button @click="handleLogout" class="logout-btn">
          退出登录
        </button>
      </nav>
    </aside>
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <header class="main-header">
        <h1>{{ $route.meta.title }}</h1>
        <div class="user-info">
          <span>欢迎, {{ authStore.user?.name }}</span>
        </div>
      </header>
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 250px;
  background-color: #2c3e50;
  color: white;
  height: 100vh;
  position: fixed;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid #34495e;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.sidebar-nav {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.sidebar-nav a {
  color: #ecf0f1;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s;
}

.sidebar-nav a.active {
  background-color: #3498db;
  color: white;
}

.sidebar-nav a:hover:not(.active) {
  background-color: #34495e;
}

.logout-btn {
  margin-top: auto;
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 0.75rem;
  width: 100%;
  text-align: left;
  padding-left: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background-color: #c0392b;
}

.main-content {
  flex: 1;
  margin-left: 250px;
  padding: 1.5rem;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.main-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.user-info {
  color: #555;
}
</style>
